<!-- 
在 Vue项目 打包过程中，针对每个单文件组件，Vue 会将 `<template>` 标签中的模板代码编译成渲染函数。这样，在组件实例化时，就可以直接使用已经预编译的渲染函数来渲染组件，而不用先进行模板编译的过程。

这一过程发生在 `webpack` 打包时通过 使用`vue-template-compiler`自动对每个单文件组件的`<template>`模板编译得到渲染函数。这样做的好处
  1. 可以提高组件的性能，避免每次渲染都要重新解析模板生成渲染函数的开销。
  2. 并且在打包好的项目中使用的vue不需要使用完整版本的vue,只需要使用runtime版本的vue即可,可以节省30%左右的大小

因此，Vue 单文件组件中的 <template> 标签可以说是最终转化成了 JavaScript 代码，并且被编译成预编译的渲染函数保存起来，以提高组件的运行效率。
 -->

<template>
  <div class="box">
    <h2>App组件</h2>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style>
.box {
  width: 100px;
  height: 100px;
  background: red;
}
</style>
